<template>
	<div id='train'>
		<div class="shang clearfix">
			<div class="fl img_h">
				<img src="../../../../static/imgs/img2/M2.jpg" alt="" />
				<p>5A级教学环境</p>

			</div>
			<div class="title fl">
				<h2>{{h3_txt}}</h2>
				<h3>{{h4_txt}}</h3>
				<span class='underline'></span>
				<p>{{txt}}</p>
			</div>
		</div>

		<div class='imgs_o clearfix'>
			<div class="txt fl img_0 base">
				<div class="a"></div>
				<p>{{imgtxt[0]}}</p>
			</div>
			<div class="img_1 fl base">
				<div class="a"></div>
				<p>{{imgtxt[1]}}</p>
			</div>
			<div class="img_2 fr base">
				<div class="a"></div>
				<p>{{imgtxt[2]}}</p>
			</div>
			<div class="img_3 fl base">
				<div class="a"></div>
				<p>{{imgtxt[3]}}</p>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		name: 'Train',
		data() {
			return {
				h3_txt: '培训学院',
				h4_txt: '美肌工坊商学院',
				txt: "美肌工坊拥有专业的科技美容培训学院，联合国外排名前十专家亲临授课，1V1精心指导，全年五大阶段系统化定制教学，帮助构建最为专业的科技美容知识体系，更特聘国内美业知名营销实战专家，结合中国市场，从开店、拓客、营销、管理等多方面展开，传授宝贵的实战经验，致力于帮助学员创业并赋能门店。至今，已顺利开设45期培训课程，输送超8000名皮肤管家。",
				imgtxt: ['美业大咖亲临授课', '小班教学', '学院现场实操', '历届学院风采']
			}
		}
	}
</script>

<style lang="scss" scoped>
	#train {
		padding: 504px 0 0 0;
		.shang {
			.img_h {
				margin-left: 274px;
				width: 357px;
				height: 361px;
				box-shadow: 15px 15px 5px #888888;
				overflow: hidden;
				img {
					width: 100%;
					height: 100%;
				}
				p {
					width: 100%;
					height: 100%;
					transition: all .2s ease-in;
					font-size: 36px;
					font-family: SourceHanSansCN-Normal;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(247, 133, 90, 0.8);
				}
			}
			.img_h:hover p {
				transform: translate(0, -100%);
			}
			.title {
				margin-left: 172px;
				width: 851px;
				h2 {
					font-size: 48px;
					font-family: SourceHanSansCN-Bold;
					color: rgba(245, 133, 95, 1);
					line-height: 64px;
				}
				h3 {
					font-size: 40px;
					font-family: SourceHanSansCN-Light;
					color: rgba(160, 160, 160, 1);
					line-height: 64px;
				}
				.underline {
					display: block;
					width: 68px;
					height: 3px;
					background-color: #F5855F;
				}
				p {
					font-size: 22px;
					font-family: SourceHanSansCN-Normal;
					color: #767676;
					line-height: 25px;
				}
			}
		}
		.imgs_o {
			.base {
				overflow: hidden;
				p {
					width: 100%;
					height: 100%;
					transition: all .2s ease-in;
					font-size: 36px;
					font-family: SourceHanSansCN-Normal;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(247, 133, 90, 0.8);
				}
			}
			.base:hover p {
				transform: translate(0, -100%);
			}
			.a {
				width: 100%;
				height: 100%;
			}
			.img_0 {
				margin-top: 127px;
				margin-left: 142px;
				width: 510px;
				height: 474px;
				box-shadow: 15px 15px 5px #888888;
				background: url("../../../../static/imgs/img2/pxbt.jpg") no-repeat;
				background-size: cover;
			}
			.img_1 {
				width: 421px;
				height: 427px;
				margin-left: 108px;
				background: url("../../../../static/imgs/img2/wxtp.jpg") no-repeat;
				background-size: cover;
				box-shadow: 15px 15px 5px #888888;
			}
			.img_2 {
				width: 510px;
				height: 516px;
				margin: 131px 116px auto auto;
				background: url("../../../../static/imgs/img2/M68.png");
				background-size: cover;
				box-shadow: 15px 15px 5px #888888;
			}
			.img_3 {
				width: 420px;
				height: 340px;
				margin-left: 116px;
				background: url("../../../../static/imgs/img2/DSC_6088.png") no-repeat;
				background-position: center center;
				margin-top: 93px;
				box-shadow: 15px 15px 5px #888888;
			}
		}
	}
</style>